<template>
	<z-paging-swiper>
		<template #top>
			<cl-navbar :title="$t('astral.index.title')" leftIconSize="40rpx" placeholder :autoBack="false" leftIcon="">
				<view class="navtitleview" slot="center">
					<u-tabs
					    :list="tabslist"
					    lineWidth="20"
					    lineHeight="7"
					    lineColor="url(/static/icon/tabsd.png) 100% 100%"
					    :activeStyle="{
					        color: '#303133',
							fontSize:'36rpx',
					        fontWeight: 'bold',
							backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(229, 189, 132, 1) 100% )',
							overflowWrap: 'break-word',
							'-webkit-background-clip': 'text',
							'-webkit-text-fill-color': 'transparent'
					    }"
						@click="tabsClick"
					    :inactiveStyle="{
							fontSize:'36rpx',
					        color: '#606266'
					    }"
					    itemStyle="padding-left: 50rpx; padding-right: 50rpx; height: 90rpx;"
					    >
					    </u-tabs>
					
				</view>
			</cl-navbar>
			<view style="padding: 0 30rpx;margin-top: 30rpx;">
				<u-swiper radius="40rpx" :list="swiperlist">
					<template v-slot:image="{ item, index }">
						<cl-stars-image :srckey="item.image_url"></cl-stars-image>
					</template>
				</u-swiper>
			</view>
			<view class="searchview">
				<u-notice-bar :text="noticeData" bgColor="transparent" color="#E03E3E"></u-notice-bar>
			</view>
		</template>
		<swiper class="swiper" :current="current" @animationfinish="swiperAnimationfinish" :disable-touch="true">
			<swiper-item class="swiper-item">
				<view style="height: 100%;">
					<z-paging ref="paging" v-model="astralList" @query="queryList" :show-loading-more-no-more-view="false" show-loading-more-when-reload>
						<template #top>
							<u-scroll-list :indicator="false" style="margin-left: 50rpx;">
								<view class="shangpinTabView">
									<view @click="classifyClick(item)" class="shangpinTabView__item" :class="{shangpinTabView__enable:cate_id == item.id}" v-for="(item,index) in classifyData" :key="index">
										{{item.cate_name}}
									</view>
								</view>
							</u-scroll-list>
						</template>
						<view class="box">
							<view class="list">
								<view class="list-items" v-for="(item, index) in astralList" :key="item.id + 'idx' +index" @click="godetails(item)">
									<view class="">
										<cl-stars-image :srckey="item.cover_url" v-if="!item.cover_video_url"
											imageStyle="width: 290rpx;height: 260rpx;border-radius: 20px;"></cl-stars-image>
										<cl-stars-video :srckey="item.cover_video_url" v-else 
											videoStyle="width: 290rpx;height: 260rpx;border-radius: 20px;"></cl-stars-video>
									</view>
									<view class="section">
										<view>
											<view class="section__topview u-line-2">
												<text class="section__topview__remai" v-if="item.popular_tag_name">{{item.popular_tag_name}}</text>
												<text class="section__topview__nickname" v-html="item.product_name"></text>
											</view>
											<view class="section__tagview">
												<view class="section__tagview__tag" v-for="(tag,idx) in item.label_names"
													:key="index+'tag'+idx">
													<text class="section__tagview__tag__text">{{tag}}</text>
												</view>
											</view>
										</view>
										<view class="section__bottomview">
											<view class="section__bottomview__imgview" v-if="item.images">
												<cl-stars-image :srckey="image.thumb_url"
													imageStyle="width: 70rpx;height: 70rpx;border-radius: 5px;"
													v-for="(image,imgidx) in item.images.slice(0, 3)" :key="imgidx"></cl-stars-image>
											</view>
											<view class="section__bottomview__callview">
												<text class="section__bottomview__callview__text">{{$t('astral.index.orderNow')}}</text>
												<image class="section__bottomview__callview__xin" src="/static/icon/dazhaohuxin.svg" />
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</z-paging>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view style="height: 100%;" v-if="isReview">
					<z-paging ref="pagingReview" v-model="reviewList" @query="queryListReview" :show-loading-more-no-more-view="false" show-loading-more-when-reload>
						<template #top>
							<span class="pingjiatitle">{{$t("astral.index.userEvaluation")}}</span>
						</template>
						<view class="commentView" v-if="reviewList.length">
							<view class="commentView__content">
								<view class="commentView__content__item" v-for="(item,index) in reviewList" :key="index">
									<view class="commentView__content__item__top" v-if="item.user_info">
										<view style="display: flex;align-items: center;">
											<cl-avatar :src="item.user_info.avatar_url" size="70rpx"></cl-avatar>
											<view class="commentView__content__item__top__right">
												<text class="commentView__content__item__top__right__name">{{maskString(item.user_info.nick_name)}}</text>
												<view style="display: flex;align-items: center;">
													<u-rate :value="item.rating" readonly activeColor="#F7797D" size="12"></u-rate>
													<span style="margin-left: 20rpx;font-size: 20rpx;color: #595A66;">{{item.attr_name}}</span>
												</view>
											</view>
										</view>
										<view class="lijixiadan" @click="gokefu">
											{{$t("astral.index.orderNow")}}
										</view>
									</view>
									<view class="commentView__content__item__details">
										{{item.comments}}
									</view>
									<view class="commentView__content__item__medium">
										<u-album :urls="getAlbuma(item)" singleSize="210rpx" multipleSize="210rpx" space="10rpx"></u-album>
									</view>
								</view>
							</view>
						</view>
					</z-paging>
				</view>
			</swiper-item>
		</swiper>
		
		<template slot="bottom">
			<cl-tabbar :currentTab="1"></cl-tabbar>
		</template>
	</z-paging-swiper>
</template>

<script>
	import mediaCache from '@/common/mediacache/mediaCache.js'; // 适配你的实际路径
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'astral',
		data() {
			return {
				tabslist: [{
					name: this.$t("astral.index.product"),
					val: 0,
				}, {
					name: this.$t("astral.index.evaluation"),
					val: 1,
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				
				
				noticeData:'',//轮播
				
				classifyData:[],//商品分类
				
				cate_id:0,//默认为0推荐
				swiperlist: [],//轮播图
				astralList: [],//商品列表
				
				isReview:false,//是否激活过评价
				
				reviewList:[],//评价列表
			};
		},
		computed: {
			...mapState({
				mykefu: state => state.friends.mykefu,
			}),
			getAlbuma(){
				return (item)=>{
					return item.stars_product_comment_images && item.stars_product_comment_images.map(item => {
						return {
							src:item.thumb_url,
							videoSrc:item.image_url,
							image_type:item.image_type
						}
					}) || []
				}
			}
		},
		onLoad() {
			uni.hideTabBar()
			this.getList()
		},
		methods: {
			maskString(str) {
			    if (str.length === 2) {
			        // 如果字符串长度为2，将第二位替换为 "*"
			        return str[0] + '*';
			    } else if (str.length > 2) {
			        // 如果字符串长度大于2，保留第一位和最后一位，其余用 "*" 替换
			        let firstChar = str.charAt(0);
			        let lastChar = str.charAt(str.length - 1);
			        let middleStars = '*'.repeat(str.length - 2);
			        return firstChar + middleStars + lastChar;
			    } else {
			        // 如果字符串长度小于等于1，直接返回原字符串
			        return str;
			    }
			},
			tabsClick(e){
				if(this.current == e.val)return
				this.current = e.val;
				if(!this.isReview){
					this.isReview = true
				}
			},
			gokefu() {
				if (this.mykefu) {
					this.$Router.push({
						name: 'chatMsg',
						params: {
							friend_idx: this.mykefu.user_id,
							nick_name: this.mykefu.nick_name,
							avatar_url: this.mykefu.avatar_url,
						}
					});
				} else {
					uni.showToast({
						title: this.$t("astral.details.noContact"),
						icon: 'none'
					})
				}
			},
			// swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				// this.$refs.tabs.unlockDx();
			},
			//导航切换
			// navTabClick(val){
			// 	if(this.current == val)return
			// 	this.current = val;
			// 	if(!this.isReview){
			// 		this.isReview = true
			// 	}
			// },
			//分类点击
			classifyClick(item){
				if(this.cate_id == item.id) return
				this.cate_id = item.id
				this.$refs.paging.reload()
			},
			//获取商品列表
			async queryList(pageNo, pageSize) {
				try {
					let res = await this.$api.common.starsProductsList({
						page: pageNo,
						limit: pageSize,
						cate_id:this.cate_id
					})
					if (res) {
						this.$refs.paging.complete(res.data.list)
					} else {
						this.$refs.paging.complete(false)
					}
				} catch (e) {
					this.$refs.paging.complete(false)
				}
			},
			//初始化一些东西
			getList() {
				//轮播
				this.$api.common.StarsBanner({
					banner_type: 1
				}).then(res => {
					if (res) {
						this.swiperlist = res.data.list
					}
				})
				//通知
				this.$api.common.starsNotice({
					notice_type: 1
				}).then(res => {
					if (res) {
						if(res.code == 200){
							this.noticeData = res.data.map(item => item.content).join('     ');
						}else{
							this.noticeData = ''
						}
					}
				})
				//分类
				this.$api.common.starsProductCate().then(res=>{
					if(res){
						if(res.code == 200){
							const lastItem = res.data.pop(); // 移除并获取最后一个元素
							res.data.unshift(lastItem); // 将获取的元素放到数组最前面
							this.classifyData = res.data
						}else{
							this.classifyData = []
						}
					}
				})
			},
			//评价列表
			async queryListReview(pageNo, pageSize) {
				try {
					let res = await this.$api.common.starsProductsProduct({
						page: pageNo,
						limit: pageSize
					})
					if (res) {
						this.$refs.pagingReview.complete(res.data.list)
						setTimeout(async()=>{
							for (let index in this.reviewList) {
								let item = this.reviewList[index]
								for (let index_two in item.stars_product_comment_images) {
									let item_two = item.stars_product_comment_images[index_two]
									try {
										const cachedMedia = await mediaCache.loadMedia(item_two.thumb_url, 'stars', 'image');
										this.reviewList[index].stars_product_comment_images[index_two].thumb_url = cachedMedia;
									} catch (error) {
										this.reviewList[index].stars_product_comment_images[index_two].thumb_url = '/static/logo.png'
									}
								}
							}
						},100)
					} else {
						this.$refs.pagingReview.complete(false)
					}
				} catch (e) {
					this.$refs.pagingReview.complete(false)
				}
			},
			//进入商品详情
			godetails(item) {
				this.$Router.push({
					name: 'astraldetails',
					params: {
						id: item.id
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.navtitleview {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		color: #5f5f6b;
		.shangpin{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 100rpx;
			.mouth {
			    width: 45rpx;
				height: 15rpx;
				background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngaaaefeb6b317e06591401e57d0c5eab5e31495fbbd4979e95cfca16b523555e5)
				  100% no-repeat;
				background-size: 100% 100%;
			}
		}
		&__enable{
			background-image: linear-gradient(
				180deg,
				rgba(255, 255, 255, 1) 0,
				rgba(229, 189, 132, 1) 100%
		    );
			overflow-wrap: break-word;
			font-weight: 500;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.pingjia{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}
	.pingjiatitle{
		margin: 30rpx 50rpx 0rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		background-image: linear-gradient(
		  180deg,
		  rgba(255, 255, 255, 1) 0,
		  rgba(229, 189, 132, 1) 100%
		);
		overflow-wrap: break-word;
		font-weight: 500;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.commentView{
		margin: 30rpx 30rpx 0;
		background: #1E1F30;
		border-radius: 20rpx;
		padding: 30rpx 20rpx 20rpx;
		&__content {
			display: flex;
			flex-direction: column;
			width: 100%;
			&__item {
				margin-top: 40rpx;
				&:first-of-type{
					margin-top: 0;
				}
				&__top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					&__right{
						margin-left: 10rpx;
						display: flex;
						flex-direction: column;
						&__name{
							font-size: 24rpx;
							color: #595A66;
							margin-bottom: 5rpx;
							margin-left: 5rpx;
						}
					}
					.lijixiadan{
						background: #F7797D;
						border-radius: 24rpx;
						padding: 8rpx 15rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						white-space: nowrap;
					}
				}
				&__details{
					margin: 20rpx 0;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
				}
			}
			&__allbtn{
				font-size: 24rpx;
				color: #595A66;
				background: #121325;
				border-radius: 10rpx;
				padding: 10rpx 15rpx;
				margin-top: 40rpx;
			}
		}
	}
	.shangpinTabView{
		margin: 20rpx 0 0rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #5F5F6B;
		
		&__item{
			margin-right: 40rpx;
			background: #1A1B2B;
			border-radius: 28rpx;
			padding: 5rpx 30rpx;
			white-space: nowrap;
			&::last-of-type{
				margin-right: 0;
			}
		}
		&__enable{
			background: linear-gradient( 135deg, #EB7D7D 0%, #EF9575 100%);
			border-radius: 28rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.searchview {
		margin: 20rpx 20rpx 0;
	}
	.swiper {
		height: 100%;
	}
	.box {
		padding: 0 30rpx;
		.list {
			margin: 20rpx 0 0 0;
			.list-items {
				background-color: rgba(30, 31, 48, 1);
				border-radius: 20px;
				margin-bottom: 30rpx;
				display: flex;
	
				.section {
					margin: 20rpx 0 15rpx 0;
					padding: 0 25rpx 0 20rpx;
					display: flex;
					flex: 1;
					overflow: hidden;
					flex-direction: column;
					justify-content: space-between;
	
					&__topview {
						// display: flex;
						line-height: 1.2;
						&__remai {
							// align-self: self-start;
							background: #FF605F;
							border-radius: 10rpx;
							padding: 3rpx 10rpx;
							font-size: 20rpx;
							margin-right: 10rpx;
						}
	
						&__nickname {
							// overflow-wrap: break-word;
							color: #fff;
							font-size: 28rpx;
						}
					}
	
					&__tagview {
						display: flex;
						gap: 10rpx;
						margin-top: 28rpx;
	
						&__tag {
							display: flex;
							border-radius: 11px;
							padding: 3rpx 10rpx;
							background: #C7964F;
	
							&__text {
								overflow-wrap: break-word;
								color: rgba(255, 255, 255, 1);
								font-size: 20rpx;
							}
						}
					}
	
					&__detail {
						overflow-wrap: break-word;
						color: #61626E;
						font-size: 24rpx;
					}
	
					&__bottomview {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
	
						&__imgview {
							display: flex;
							gap: 10rpx;
						}
	
						&__callview {
							justify-self: end;
							background-color: rgba(18, 19, 37, 1);
							border-radius: 10px;
							position: relative;
							padding: 8rpx 20rpx 8rpx 20rpx;
							align-self: flex-end;
							display: flex;
							align-items: center;
							justify-content: center;
	
							&__text {
								background-image: linear-gradient(180deg,
										rgba(255, 255, 255, 1) 0,
										rgba(182, 139, 77, 1) 100%);
								overflow-wrap: break-word;
								color: rgba(255, 255, 255, 1);
								font-size: 24rpx;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
							}
	
							&__xin {
								position: absolute;
								right: 0rpx;
								top: -25rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
			}
		}
	}
</style>